<script setup lang="ts">
import { useRoute } from 'vue-router';
import ArticleCard from './articleCard.vue'
import { onMounted, ref } from 'vue';
import type { ElScrollbar } from 'element-plus';
import type { IArticles } from '@/types/articles';
import { getArticlesApi } from '@/apis/article';
// 获取当前组件在的路由信息,请求当前组件所在分类下的文章数据
const route = useRoute()
// 当前组件所在的文章分类id
const cateId = route.meta.id as number
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
// 根据id获取文章列表数据
const ArticlesList = ref<IArticles[]>([])
const getArticlesList = async () => {
    const res = await getArticlesApi(cateId)
    ArticlesList.value = res.data
    console.log(res)
}
onMounted(() => {
    // 组件挂载后,滚动条回到顶部,请求数据
    scrollbarRef.value!.setScrollTop(0)
    getArticlesList()
})

</script>

<template>
    <el-scrollbar ref="scrollbarRef" height="800px" :native="true">
        <ArticleCard v-for="(item, index) in ArticlesList" :key="item.id" :item="item"></ArticleCard>
    </el-scrollbar>
</template>

<style scoped></style>
